Floating Panels > About performance

 

About performance

Declaring the selectionChanged() or documentEdited() function in your custom floating panels risks adversely impacting Dreamweaver's performance. Consider that documentEdited() is called after every keystroke, and selectionChanged() is called after every press of an arrow key if Dreamweaver has been idle for more than one-tenth of a second. It's important to test your floating panel against many different scenarios, using large documents (100K or more of HTML) whenever possible.

To help you avoid performance penalties, setTimeout() was implemented as a global method in Dreamweaver 3. As in the browsers, setTimeout() takes two arguments: the JavaScript to be called and the amount of time in milliseconds to wait before calling it.

The setTimeout() method lets you build pauses into your processing during which the user can continue interacting with the application. You must build in these pauses explicitly because the screen freezes while scripts are processing, preventing the user from performing further edits (and you from updating the interface or the floating panel).

The following code is from a floating panel that displays information about every layer in the document. It uses setTimeout() to pause for half a second after processing each layer:

/* create a flag that specifies whether an edit is being ¬
	processed, and set it to false. */
document.running = false;

/* this function called when document is edited */
function documentEdited(){
  /* create a list of all the layers to be processed */
  var dom = dw.getDocumentDOM();
  document.layers = dom.getElementsByTagName("layer");
  document.numLayers = document.layers.length;
  document.numProcessed = 0;

  /* set a timer to call processLayer(); if we didn't get
   * to finish processing the previous edit, then the timer
   * is already set. */
  if (document.running = false){
    setTimeout("processLayer()", 500);
  }

  /* set the processing flag to true */
  document.running = true;
}

/* process one layer */
function processLayer(){
  /* display information for the next unprocessed layer.
      displayLayer() is a function you would write to 
      perform the "magic".  */
   displayLayer(document.layers[document.numProcessed]);

  /* if there's more work to do, set a timeout to process
   * the next layer.  If we're finished, set the document.running
   * flag to false. */
  document.numProcessed = document.numProcessed + 1;
  if (document.numProcessed < document.numLayers){
    setTimeout("processLayer()", 500);
  }else{
    document.running = false;
  }
}